<style scoped lang="scss">
@import './gy-popup';
.icon-close{
	color: #afafaf;
	font-size: 22rpx;
	width: 40px;
	height: 45rpx;
	line-height: 45rpx;
	text-align: center;
}
</style>

<template>
  <view
    @touchmove.stop.prevent="clear"
    class="popup-wrapper"
    :style="{'z-index': zIndex}">
    <view
      class="popup-container"
      :class="[{show: show}, {round: round}]"
      :style="{
        'z-index': zIndex, 
        'height': popupHeight}">
      <view class="popup-header" :class="size" v-if="header">
        <view class="inline-block dis-flex justify-between align-center">
          <view class="">
          	<text class="popup-title f34 text-gray3 fw700">{{title}}</text>
          	<text class="text-grayC f28 fw500 sub">{{subTit}}</text>
          </view>
					<view class="iconfont icon-close" @tap="close">关闭</view>
        </view>
      </view>
      <view class="popup-content">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'uni-popup',                          // 底部滑出组件
    props: {
      header: {
        type: Boolean,
        default: false
      },
      back: {
        type: Boolean,
        default: false
      },
      title: String,
      subTit: String,
      zIndex: {
        type: Number,
        default: 2021                
      },
      round: {
        type: Boolean,
        default: true                 // 样式是否为圆角形 
      },
      show: {
        type: Boolean,
        default: false
      },
      height: {
        type: String,
        default: 'auto'
      },
      size: {
        type: String, 
        default: 'normal'                                            // 顶部header的大小 normal/small
      }
    },
    watch: {
      height(newHeight) {
        this.popupHeight = newHeight
      }
    },
    data() {
      return {
        popupHeight: this.height
      }
    },
    methods: {
      // 关闭弹窗
      close() {
        this.$emit('update:show', false)
        this.$emit('close')
      },
      // 点击弹窗返回按钮
      handleBack() {
         this.$emit('update:show', false)
      },
      clear(e) {
				e.stopPropagation()
			},
      filterViewMove() {}
    }
  }
</script>

